<!DOCTYPE html>
<html>
<head>
    <title>借阅记录</title>
    {% include 'system/common/header.html' %}</head>
<link rel="stylesheet" href="{{ url_for('static', filename='system/admin/css/other/user.css') }}"/>
<body class="pear-container">
<div class="layui-card">
    <div class="layui-card-body">
        <form class="layui-form" action="">
            <div class="layui-form-item">
                <label class="layui-form-label">借用状态</label>
                <div class="layui-input-inline">
                    <select name="status">
                        <option value="">请选择</option>
                        <option value="2">已归还</option>
                        <option value="1">正常借用</option>
                        <option value="0">超时</option>
                    </select>
                </div>
                <button class="pear-btn pear-btn-md pear-btn-primary" lay-submit lay-filter="record-query">
                    <i class="layui-icon layui-icon-search"></i>
                    查询
                </button>
                <button type="reset" class="pear-btn pear-btn-md">
                    <i class="layui-icon layui-icon-refresh"></i>
                    重置
                </button>
            </div>
        </form>
    </div>
</div>
<div class="layui-card">
    <div class="layui-card-body">
        <table id="record-table" lay-filter="record-table"></table>
    </div>
</div>
</body>


</script>

{% include 'system/common/footer.html' %}
<script>

    function render_status(d) {
        if (d.status === 2) {
            return '<span class="layui-badge layui-bg-green">已归还</span>'
        } else if (d.status === 1) {
            return '<span class="layui-badge layui-bg-gray">正常借出</span>'
        } else if (d.status === 0) {
            return '<span class="layui-badge layui-bg-red">超时</span>'
        }
    }



    layui.use(['table', 'form', 'jquery', 'popup', 'common'], function () {
            let table = layui.table
            let form = layui.form
            let $ = layui.jquery
            let popup = layui.popup
            var laydate = layui.laydate;

            let MODULE_PATH = '/system/device/'

            let cols = [
                [
                    {title: 'id', field: 'id', align: 'center', width:50},
                    {title: '借用人ID', field: 'borrowerId', align: 'center', width: 100},
                    {title: '借用人名称', field: 'borrowerName', align: 'center'},
                    {title: '设备ID', field: 'deviceId', align: 'center', width: 100},
                    {title: '设备名称', field: 'deviceName', align: 'center'},
                    {title: '状态', field: 'status', align: 'center', templet: render_status},
                    {title: '借出时间', field: 'borrow_at', align: 'center', templet:render_sTime},
                    {title: '归还时间', field: 'return_at', align: 'center', templet:render_eTime},
                    {title: '罚金（元）', field: 'pay_money', align: 'center'}
                ]
            ]


            function render_sTime(d) {
                return layui.util.toDateString(d.borrow_at)
            }

            function render_eTime(d) {
                return layui.util.toDateString(d.return_at)
            }

            table.render({
                elem: '#record-table',
                url: MODULE_PATH + '/records/data',
                page: true,
                cols: cols,
                skin: 'line',
                toolbar: '#record-toolbar',
                defaultToolbar: [{
                    layEvent: 'refresh',
                    icon: 'layui-icon-refresh',
                }, 'filter', 'print', 'exports']
            })

            table.on('tool(record-table)', function (obj) {
                if (obj.event === 'detail') {
                    window.detail(obj)
                }
            })

            table.on('toolbar(record-table)', function (obj) {
                if (obj.event === 'refresh') {
                    window.refresh()
                }
            })

            form.on('submit(record-query)', function (data) {
                table.reload('record-table', {where: data.field})
                return false
            })


            window.detail = function (obj) {
                layer.open({
                    type: 2,
                    title: '详情',
                    shade: 0.1,
                    area: ['500px', '500px'],
                    content: MODULE_PATH + 'records/detail/' + obj.data['id']
                })
            }


            window.refresh = function (param) {
                table.reload('record-table', {where: param})
            }
        }
    )
</script>
</html>